<template>
  <div class="map-view">
    <BaseMap class="map" :map />
    <header class="map-header">
      <h1 class="map-title">光谷智慧交通</h1>
      <div class="operation">
        <RealtimeTraffic :map v-if="permission & Permissions.RealTimeTraffic" />
        <ViewAnnouncement :map v-if="permission & Permissions.ViewAnnouncement" />
        <ReportRoadConditions :map :userName v-if="permission & Permissions.ReportRoadConditions" />
        <VideoMonitoring :map v-if="permission & Permissions.VideoMonitoring" />
        <EventAddition :map v-if="permission & Permissions.EventAddition" />
        <EventQuery :map v-if="permission & Permissions.EventQuery" />
        <EventUpdates :map v-if="permission & Permissions.EventUpdates" />
        <ReleaseAnnouncement :map v-if="permission & Permissions.ReleaseAnnouncement" />
        <RoadConditionsInformation :map v-if="permission & Permissions.TrafficInformation" />
        <ToolBox :map />
        <div class="right-group">
          <UserManagement v-if="permission & Permissions.UserManagement" />
          <EventSearch :map />
        </div>
      </div>
      <el-dropdown trigger="click" @visible-change="(e) => (isExpanded = e)">
        <span class="el-dropdown-link" :class="{ active: isExpanded }">
          {{ userName }}
          <el-icon class="el-icon--right" :class="{ active: isExpanded }">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </header>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserProfile, userLogOut } from '@/api/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import permissionCode from '@/utils/permissionCode'
import BaseMap from '@/components/BaseMap.vue'
import RealtimeTraffic from '@/components/RealtimeTraffic.vue'
import ReleaseAnnouncement from '@/components/ReleaseAnnouncement/ReleaseAnnouncement.vue'
import VideoMonitoring from '@/components/VideoMonitoring.vue'
import ViewAnnouncement from '@/components/ViewAnnouncement.vue'
import EventAddition from '@/components/EventAddition.vue'
import EventUpdates from '@/components/EventUpdates.vue'
import EventQuery from '@/components/EventQuery/EventQuery.vue'
import ToolBox from '@/components/ToolBox.vue'
import EventSearch from '@/components/EventQuery/EventSearch.vue'
import UserManagement from '@/components/UserManagement/UserManagement.vue'
import ReportRoadConditions from '@/components/ReportRoadConditions.vue'
import RoadConditionsInformation from '@/components/RoadConditionsInformation.vue'

const router = useRouter()

const permission = ref()
const Permissions = ref(permissionCode)
const userName = ref('')
const isExpanded = ref(false)

const map = new ol.Map()

const logOut = async () => {
  try {
    await userLogOut()
    ElMessage({
      message: '退出登录成功',
      type: 'success',
    })
    router.push({ name: 'login' })
  } catch (error) {
    ElMessage({
      message: '退出登录失败',
      type: 'error',
    })
    console.error('退出登录失败', error)
  }
}

onMounted(async () => {
  ;({ userName: userName.value, permission: permission.value } = await getUserProfile())
})
</script>

<style lang="scss" scoped>
$heade-height: 3rem;
.map-view {
  height: 100vh;
  .map-header {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    height: $heade-height;
    .map-title {
      margin-left: 10px;
      margin-bottom: 5px;
      margin-right: 5px;
      font-size: 1.3rem;
      font-weight: bold;
      color: #666;
    }
    .operation {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 5px;
      .right-group {
        display: flex;
        gap: 5px;
        margin-left: auto; //自动接收剩余空间,实现右对齐
      }
    }
    .el-dropdown {
      margin-bottom: 5px;
      margin-right: 10px;
      padding: 0px 15px;
      outline: none;
      cursor: pointer;
      .el-dropdown-link {
        &.active {
          color: #409eff;
        }
      }
      .el-icon--right {
        transition: all 0.2s;
        transform: rotate(0deg);
        &.active {
          transform: rotate(180deg);
        }
      }
    }
  }
  .map {
    position: absolute;
    top: $heade-height;
    height: calc(100vh - $heade-height);
  }
  :deep(.el-button) {
    & + .el-button {
      margin-left: unset;
    }
  }
}
</style>
